<script setup>
import {ElMessage,ElMessageBox} from "element-plus"
import {reactive, ref, onMounted, nextTick} from "vue";
import VideoTagApi from "@/api/VideoTagApi.js";
import {Search} from "@element-plus/icons-vue";
let totalNum = ref(0)
const state = reactive({
  tagInfo:{
    tagId:null,
    tagName:null
  },
  queryDto:{
    tagId:null,
    tagName:null,
    pageNum:1,
    size:10
  },
  tagList:[],
  isSaveOperation:false,
  showSaveOrUpdateDialog:false,
  currentClickTagId:null,
  totalNum:0
})
onMounted(()=>{
  getTagList()
})
const getTagList =()=>{
 VideoTagApi.pageQueryTag(state.queryDto).then(res=>{
   state.tagList = res.data.data
  totalNum.value = res.data.total
 })
}



//修改编辑对话框部分
const saveOrUpdateTag=()=>{
  const operation = state.isSaveOperation ? VideoTagApi.addTag:VideoTagApi.updateTag;
  operation(state.tagInfo).then(()=>{
    getTagList()
    state.showSaveOrUpdateDialog = false
  })

}

const openSaveOrUpdateDialog=(tagId,isSave)=>{
  state.isSaveOperation = isSave
  state.currentClickTagId = tagId
  if (isSave){
    state.tagInfo ={}
    state.showSaveOrUpdateDialog = true
  }else {
    VideoTagApi.getTagInfo(tagId).then(res=>{
      state.tagInfo = res.data
      state.showSaveOrUpdateDialog = true
    })

  }
}

//角色删除
const confirmRoleDelete=(tagId)=>{
  VideoTagApi.deleteTag(tagId).then(res=>{
    getTagList()
    ElMessage.success("删除成功!")
  })
}
const currentPageChange = (page)=>{
  state.queryDto.pageNum = page
  getTagList()
}


</script>
<template>
  <el-card style="--el-card-border-radius: 8px;--el-card-padding: 10px">
    <el-form :inline="true" >
      <el-form-item >
        <el-input v-model="state.queryDto.tagId" placeholder="标签id" clearable />
      </el-form-item>
      <el-form-item >
        <el-input v-model="state.queryDto.tagName" placeholder="标签名称" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="Search" @click="getTagList">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <p style="margin: 5px 0">
    <el-button type="primary" @click="openSaveOrUpdateDialog(null,true)">
      新增标签<el-icon class="el-icon--right"><Plus /></el-icon>
    </el-button>
  </p>
  <el-table :data="state.tagList" border style="width: 100%">
    <el-table-column  align="center" prop="tagId" label="标签id"  />
    <el-table-column  align="center" prop="tagName" label="标签名称" />

    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button type="primary" text  icon="Edit" @click="openSaveOrUpdateDialog(scope.row.tagId,false)"/>
        <el-popconfirm :title="`确定删除标签【${scope.row.tagName}】吗？`"
                       @confirm="confirmRoleDelete(scope.row.tagId)"
                       confirm-button-text="确认" confirm-button-type="danger" cancel-button-text="取消" >
          <template  #reference>
            <el-button type="danger" text  icon="Delete" />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="margin:20px auto;justify-content: center"
      small
      background
      :total="totalNum"
      :default-page-size="state.queryDto.size"
      layout="prev, pager, next"
      :current-page="state.queryDto.pageNum"
      @update:current-page="currentPageChange"
  />
  <!-- 修改编辑对话框 -->
  <el-dialog style="border-radius: 12px" v-model="state.showSaveOrUpdateDialog"  width="35%" center :title="state.isSaveOperation?'新增标签':'修改标签'">
    <el-form :model="state.tagInfo" label-position="top">
      <el-form-item label="标签名称">
        <el-input v-model="state.tagInfo.tagName"/>
      </el-form-item>


    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.showSaveOrUpdateDialog = false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdateTag">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>



</template>
<style scoped lang="less">
</style>


